<template>
  <div class="content">
    <table class="Datatable">
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="checked" v-on:click="checkedAll" />
          </th>
          <th>姓名</th>
          <th>邮箱号码</th>
          <th>角色</th>
          <th>注册事件</th>
          <th>最近登录时间</th>
        </tr>
      </thead>
      <tbody v-if="tableDataAll.length != 0">
        <tr v-for="(item,index) in tableData" :key="index">
          <td>
            <input type="checkbox" v-model="checkboxList" :value="item.adminEmail" />
          </td>
          <td>{{ item.adminName }}</td>
          <td>{{ item.adminEmail }}</td>
          <td>
            <span  :class="['admin', item.roleName === '超级管理员' ? 'super' : '']">{{ item.roleName }}</span>
          </td>
          <td>{{ item.creatTime?setLocalTime(item.item.creatTime):item.creatTime }}</td>
          <td>{{ item.lastTime?setLocalTime(item.lastTime):item.lastTime }}</td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="6">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <div class="flex-end">
      <el-pagination
        v-if="tableDataAll.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import getUTCTime from '@/utils/tools/getUTCTime'
import file from '@/utils/tools/fileExport'
export default {
  data () {
    return {
      currentPage: 1,
      size: 10,
      checkboxList: [],
      checked: false

    }
  },
  computed: {
    tableData () {
      return this.$store.state.systemManage.tableData
    },
    tableDataAll () {
      return this.$store.state.systemManage.tableData
    },
    total () {
      return this.$store.state.systemManage.total
    }
  },
  created () {
    this.$store.commit('systemManage/set_page', this.currentPage)
    this.$store.commit('systemManage/set_size', this.size)
    this.getinfo()
  },

  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$store.commit('systemManage/set_page', this.currentPage)
      this.getinfo()
    },
    handleSizeChange (size) {
      this.size = size
      this.$store.commit('systemManage/set_size', this.size)
      this.getinfo()
    },
    setLocalTime (time) {
      return this.$moment(+new Date(time)).format('YYYY-MM-DD HH:mm:ss')
    },
    checkedAll () {
      // console.log(this.checkboxList)
      if (this.checked) {
        // 实现反选
        this.checkboxList = []
      } else {
        // 实现全选
        this.checkboxList = []
        this.tableData.forEach((item) => {
          this.checkboxList.push(item.adminEmail)
        })
      }
    },
    searchDetail (id) {
      alert(id)
      this.$router.push({
        path: `/feedbackdetail/${id}`
      })
    },
    getinfo () {
      this.$store.dispatch('systemManage/getAllAdminData').then(res => {
      }).catch(res => {
        this.$message({
          type: 'error',
          message: res,
          duration: 1000
        })
      })
    },
    daochu () {
      if (this.checkboxList.length !== 0) {
        const timeZone = -getUTCTime.getUTCTime(new Date())
        const listEmail = this.checkboxList.join(',')
        this.$store.dispatch('systemManage/DaoChu', { listEmail, timeZone }).then(res => {
          file.fileExport(res.data, '管理员信息')
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err,
            duration: 1000
          })
        })
      } else {
        this.$message({
          type: 'error',
          message: '请先勾选',
          duration: 1000
        })
      }
    }
  },
  watch: {
    // 深度 watcher
    checkboxList: {
      handler: function (val, oldVal) {
        // console.log(this.checkboxList)
        if (this.checkboxList.length === this.tableData.length) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  margin-top: 10px;
  padding-bottom: 120px;
  table {
    th,
    td {
      &:nth-child(1) {
        width: 60px;
      }
      &:nth-child(2) {
        width: 130px;
      }
      &:nth-child(3) {
        width: 302px;
      }
      &:nth-child(4) {
        width: 346px;
      }
      &:nth-child(5) {
        width: 370px;
      }
    }
  }
  .admin {
    display: inline-block;
    width: 84px;
    height: 30px;
    opacity: 1;
    background: #eef0ff;
    border-radius: 4px;
    line-height: 30px;
    color: #304eec;
  }
  .super {
    background-color: #fff5eb;
    color: #e88300;
  }
}
</style>
